<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
    #container {
        height: 400px;
        min-width: 310px;
        max-width: 800px;
        margin: 0 auto;
    }
</style>
<script type="text/javascript">
$(function () {

    // Give the points a 3D feel by adding a radial gradient
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });

    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            margin: 100,
            type: 'scatter',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 5,

                frame: {
                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                }
            }
        },
        title: {
            text: 'Draggable box'
        },
        subtitle: {
            text: 'Click and drag the plot area to rotate in space'
        },
        plotOptions: {
            scatter: {
                width: 10,
                height: 10,
                depth: 10
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            title: null
        },
        xAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 1
        },
        zAxis: {
            min: 0,
            max: 10
        },
        legend: {
            enabled: false
        },
        series: [
            {
                name: 'Reading',
                colorByPoint: true,
                data: [
                    [1, 6, 5],
                    [8, 7, 9],
                    [1, 3, 4],
                    [4, 6, 8],
                    [5, 7, 7],
                    [6, 9, 6],
                    [7, 0, 5],
                    [2, 3, 3],
                    [3, 9, 8],
                    [3, 6, 5],
                    [4, 9, 4],
                    [2, 3, 3],
                    [6, 9, 9],
                    [0, 7, 0],
                    [7, 7, 9],
                    [7, 2, 9],
                    [0, 6, 2],
                    [4, 6, 7],
                    [3, 7, 7],
                    [0, 1, 7],
                    [2, 8, 6],
                    [2, 3, 7],
                    [6, 4, 8],
                    [3, 5, 9],
                    [7, 9, 5],
                    [3, 1, 7],
                    [4, 4, 2],
                    [3, 6, 2],
                    [3, 1, 6],
                    [6, 8, 5],
                    [6, 6, 7],
                    [4, 1, 1],
                    [7, 2, 7],
                    [7, 7, 0],
                    [8, 8, 9],
                    [9, 4, 1],
                    [8, 3, 4],
                    [9, 8, 9],
                    [3, 5, 3],
                    [0, 2, 4],
                    [6, 0, 2],
                    [2, 1, 3],
                    [5, 8, 9],
                    [2, 1, 1],
                    [9, 7, 6],
                    [3, 0, 2],
                    [9, 9, 0],
                    [3, 4, 8],
                    [2, 6, 1],
                    [8, 9, 2],
                    [7, 6, 5],
                    [6, 3, 1],
                    [9, 3, 1],
                    [8, 9, 3],
                    [9, 1, 0],
                    [3, 8, 7],
                    [8, 0, 0],
                    [4, 9, 7],
                    [8, 6, 2],
                    [4, 3, 0],
                    [2, 3, 5],
                    [9, 1, 4],
                    [1, 1, 4],
                    [6, 0, 2],
                    [6, 1, 6],
                    [3, 8, 8],
                    [8, 8, 7],
                    [5, 5, 0],
                    [3, 9, 6],
                    [5, 4, 3],
                    [6, 8, 3],
                    [0, 1, 5],
                    [6, 7, 3],
                    [8, 3, 2],
                    [3, 8, 3],
                    [2, 1, 6],
                    [4, 6, 7],
                    [8, 9, 9],
                    [5, 4, 2],
                    [6, 1, 3],
                    [6, 9, 5],
                    [4, 8, 2],
                    [9, 7, 4],
                    [5, 4, 2],
                    [9, 6, 1],
                    [2, 7, 3],
                    [4, 5, 4],
                    [6, 8, 1],
                    [3, 4, 0],
                    [2, 2, 6],
                    [5, 1, 2],
                    [9, 9, 7],
                    [6, 9, 9],
                    [8, 4, 3],
                    [4, 1, 7],
                    [6, 2, 5],
                    [0, 4, 9],
                    [3, 5, 9],
                    [6, 9, 1],
                    [1, 9, 2]
                ]
            }
        ]
    });


    // Add mouse events for rotation
    $(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
        e = chart.pointer.normalize(e);

        var posX = e.pageX,
                posY = e.pageY,
                alpha = chart.options.chart.options3d.alpha,
                beta = chart.options.chart.options3d.beta,
                newAlpha,
                newBeta,
                sensitivity = 5; // lower is more sensitive

        $(document).bind({
            'mousemove.hc touchdrag.hc': function (e) {
                // Run beta
                newBeta = beta + (posX - e.pageX) / sensitivity;
                newBeta = Math.min(100, Math.max(-100, newBeta));
                chart.options.chart.options3d.beta = newBeta;

                // Run alpha
                newAlpha = alpha + (e.pageY - posY) / sensitivity;
                newAlpha = Math.min(100, Math.max(-100, newAlpha));
                chart.options.chart.options3d.alpha = newAlpha;

                chart.redraw(false);
            },
            'mouseup touchend': function () {
                $(document).unbind('.hc');
            }
        });
    });

});
</script>
</head>
<body>

<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
</body>
</html>
